import { converValue, refValue } from '../../utils/index.js';
import props from './props.js';
export default (hook) => {
	const { $computed } = hook.$m;
	return {
		isJiess: true,
		name: 'JiessSpace',
		props,
		setup({
			cols,
			span,
			gutter,

			className,
			style,
			outerAttrs,

			padding,
			innerStyle,
			innerAttrs,
		}) {
			// 参数透传注入相邻子层级的JiessSpaceItem
			this.provide({ 'jiess-space-data': { gutter, span, cols } });
			// ================================================
			const styleOuter = $computed(() => {
				return { overflow: 'hidden', ...refValue(style) };
			});
			const styleInner = $computed(() => {
				// ============================================
				return {
					flexGlow: 1,
					display: 'flex',
					flexFlow: 'row wrap',
					alignItems: 'center',
					padding: refValue(padding),
					// 换行模式，默认允许换行
					marginRight: `-${refValue(gutter)}px`,
					...innerStyle
				};
			});
			this.add({
				className: 'jiess-space',
				style: { $proxy: styleOuter },
				children: {
					style: { $proxy: styleInner },
					children: { $slot: 'default' },
					className: ['jiess-space_body', className].filter(v => v).join(),
					...innerAttrs
				},
				...outerAttrs
			});
		}
	}
}